<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">添加</h4>
</div>
<form class="form-horizontal m-t" id="myForm">
    <div class="modal-body">

            <div class="row">
                    <div class="col-sm-6">
                        <h4>菜单权限</h4>
                                <ul id="menusid" class="ztree"></ul>
                    </div>
                    <div class="col-sm-6">
                        <!--错误信息提示-->
                        <div id="errormessage" class="alert alert-danger text-center" style="display:none">&nbsp;</div>
                        
                        <div class="form-group">
                            <label class="col-sm-3 control-label">权限名</label>
                            <div class="col-sm-8">
                                <input id="name" name="name" class="form-control" type="text" placeholder="权限名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户</label>
                            <div class="col-sm-8">
                                <select multiple="multiple" placeholder="选择用户" id="users" name="users" class="search_user">
                                    {{<<html_user}}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注</label>
                            <div class="col-sm-8">
                                <textarea class="form-control textarea" name="description" id="description"  rows="3"></textarea>
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal" >关闭</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
            </div>
        </div>

</form>


    
    <script>
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        $('.search_user').SumoSelect({search: true, 
                                      searchText:'输入搜索字',
                                      noMatch : '没有找到匹配"{0}"的内容',
                                      okCancelInMulti: true, 
                                      selectAll: true,
                                      captionFormat: '{0} 个被选择',
                                      captionFormatAllSelected:'{0} 全部被选择',
                                      locale :  ['确定', '取消', '全选']
                                  });

        $(function() {

            $("#myForm").validate({
                rules: {
                    name : {
                        required : true,
                        minlength : 2
                    },
                    users : {
                        required : true
                    },
                },
                submitHandler: function(form) {  //通过之后回调
                    var dataPara = getFormJson(form);
                    //将数值的ID加到form字典中
                    var treedata = getTreeid("menusid");
                    dataPara["menusid"]=treedata;
                    //不适用序列化
                    //var data = $(form).serialize();
                     $.ajax({ 
                        url : "/myrbac/myrolesave", 
                        type : "post", 
                        dataType : "json", 
                        data: dataPara, 
                        success : function(d) { 
                            if (d.status==200){
                                $("#modaladd").modal('hide');
                                //刷新表格
                                $table.bootstrapTable('refresh');
                                swal({
                                    title: "操作成功",
                                    text: "2秒自动关闭",
                                    timer: 2000,
                                    type: "success",
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: "确定",
                                });
                            }else{
                                $("#errormessage").show().html("<h4>" + d.msg + "</h4>");
                            }
                        } 
                    }); 
                }, 
                invalidHandler: function(form, validator) {  //不通过回调 
                       return false; 
                } 
            });
            
            //获取数据组合成ztree数据
            $.get('/menupost/menuztree',{},function(data){
                $.fn.zTree.init($("#menusid"), setting,eval(data));
            });
        });

        //获取选中树的节点ID
        function getTreeid(treeID){
            var treeObj=$.fn.zTree.getZTreeObj(treeID);
            nodes=treeObj.getCheckedNodes(true);
            v="";
            for(var i=0;i<nodes.length;i++){
                v+=nodes[i].id + ",";
            }
            return v;
        }

        //将form中的值转换为键值对。
        function getFormJson(frm) {
            var o = {};
            var a = $(frm).serializeArray();
            $.each(a, function () {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });

            return o;
        }
    </script>

